{% extends 'base.html' %}

{% block extracss %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/hosts.css' %}">
{% endblock extracss %}

{% block main %}
<div class="table-wrapper">
    <div class="table-box-title">
        <h1>主机列表</h1>
        {% block refurbish %}
        <div>
            <button id="host-initialization">初始化主机</button>
            <button id="host-refurbish">刷新主机</button>
        </div>
        {% endblock refurbish %}
    </div>
    <div class="table-box-tool">
        <label class="count-show">
            Show
            <select class='select' type="select" id="count-show">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            Entries
        </label>
        <lable class="talbe-search">
            Search:
            <input class="search" placeholder="keyword" type="search">
        </lable>
    </div>
    <table>
    <thead>
        <tr class='tr-title'>
            <th>#</th>
            <th>hostcode</th>
            <th>os</th>
            <th>release</th>
            <th>ip_wan</th>
            <th>ip_lan</th>
            <th>hardwareoverview</th>
            <th>create_date</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        {% for host in hosts%}
        <td> {{ host.id }}</td>
        <td> {{ host.hostcode }}</td>
        <td>{{ host.os }}</td>
        <td>{{ host.release }}</td>
        <td> {{ host.ip_wan }}</td>
        <td> {{ host.ip_lan }}</td>
        <td> {{ host.configureations}}</td>
        <td> {{ host.create_date }}</td>
        <td>
            <span class='fa fa-pencil'></span>
            <span class='fa fa-trash'></span>
        </td>
    </tr>
        {% endfor %}

    </tbody>
</table>
<div class="pagination">
    <span>Showing 1 to 10 of 57 entries</span>
    <span>
        <a href="#">Previous</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">Next</a>
    </span>
</div>
</div>
{% endblock main %}
{% block extracjs %}
<script src="{% static 'js/hosts.js'%}"></script>
{% endblock extracjs %}